
/*! 
   这里是用户管理
*/
import React, { Component } from 'react';
// nodejs library to set properties for components
import PropTypes from "prop-types";
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
// core components
import GridItem from "components/Grid/GridItem.jsx";
import GridContainer from "components/Grid/GridContainer.jsx";
import Card from "components/Card/Card.jsx";
import CardHeader from "components/Card/CardHeader.jsx";
import CardBody from "components/Card/CardBody.jsx";

import MaterialTable from "material-table";
import axios from 'axios';

const styles = {
  cardCategoryWhite: {
    color: "rgba(255,255,255,.62)",
    margin: "0",
    fontSize: "14px",
    marginTop: "0",
    marginBottom: "0"
  },
  cardTitleWhite: {
    color: "#FFFFFF",
    marginTop: "0px",
    minHeight: "auto",
    fontWeight: "300",
    fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
    marginBottom: "3px",
    textDecoration: "none"
  }
};

var mydata = []
new Promise(resolve => {
  setTimeout(() => {
    resolve();
    let url = "/user/list"
    axios.get(url)
      .then(function (response) {
        let data = response.data
        // for (let i = 0;i < data.length;i++) {
        //   mydata[i] = { id: data[i].id, name: data[i].name, openid: data[i].openid, userPhone: data[i].userPhone, vip: data[i].vip }
        // }
        mydata = data;
        console.log("mydata:", mydata);
      })
      .catch(function (error) {
        console.log("error", error);
      });
  }, 600);
});

function UserProfile(props) {
  const { classes } = props;
  const [state, setState] = React.useState({
    columns: [
      { title: '编号', field: 'id', editable: 'never' },
      { title: '姓名', field: 'name', editable: 'never' },
      { title: 'openid', field: 'openid', editable: 'never' },
      { title: '电话', field: 'userPhone' },

      {
        title: '是否会员',
        field: 'vip',
        lookup: { false: '否', true: '是' },
      },
    ],
    data: mydata,
  });
  return (
    <div>
      <GridContainer>
        <GridItem xs={12} sm={12} md={12}>
          <Card>
            <CardHeader color="info">
              <h4 className={classes.cardTitleWhite}>用户列表</h4>
              <p className={classes.cardCategoryWhite}>
                可以在这里设置用户为VIP
            </p>
            </CardHeader>
            <CardBody>
              <MaterialTable

                title=" "
                columns={state.columns}
                data={state.data}
                setState="true"
                editable={{
                  onRowUpdate: (newData, oldData) =>
                    new Promise(resolve => {
                      setTimeout(() => {
                        resolve();
                        console.log("hahah", data);
                        // console.log(newData)
                        const data = [...state.data];
                        data[data.indexOf(oldData)] = newData;
                        console.log("data", newData)
                        let url = "/user"

                        axios.post(url, newData)
                          .then(function (response) {
                            let data = response.data
                            // alert(data);
                            // console.log("data:",data);
                            console.log("res:", response);
                          })
                          .catch(function (error) {
                            console.log("error", error);
                          });
                        setState({ ...state, data });
                      }, 600);
                    }),
                  // onRowDelete: oldData =>
                  //     new Promise(resolve => {
                  //         setTimeout(() => {
                  //             resolve();
                  //             const data = [...state.data];
                  //             data.splice(data.indexOf(oldData), 1);
                  //             setState({ ...state, data });
                  //         }, 600);
                  //     }),
                }}
              />
            </CardBody>
          </Card>
        </GridItem>
      </GridContainer>
    </div>
  );
}

UserProfile.propTypes = {
  classes: PropTypes.object
};

export default withStyles(styles)(UserProfile);
